<template>
  <div>
    <!-- <h1>文件预览</h1>
    {{ fileName?.split('.').pop().toLowerCase() }} -->
    <div v-if="fileUrl">
      <!-- <p>正在处理文件：{{ fileName }}</p> -->
      <div v-if="isImage">
        <img :src="fileUrl" alt="Image preview">
      </div>
      <div v-else-if="isVideo">
        <video controls>
          <source :src="fileUrl" type="video/mp4">
          您的浏览器不支持视频标签。
        </video>
      </div>
      <div v-else-if="isAudio">
        <audio controls>
          <source :src="fileUrl" type="audio/mpeg">
          您的浏览器不支持音频标签。
        </audio>
      </div>
      <div v-else>
        <p>不支持的文件类型。点击<a :href="fileUrl" download>这里下载</a>。</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';

const fileUrl = ref('');
const fileName = ref('');

const parseUrl = () => {
  const urlParams = new URLSearchParams(window.location.search);
  fileUrl.value = urlParams.get('file');
  fileName.value = fileUrl.value ? decodeURIComponent(fileUrl.value).split('/').pop() : '';
};

const isImage = computed(() =>

  ['jpg', 'jpeg', 'png', 'gif'].includes(fileName.value?.split('.').pop().toLowerCase())
);

const isVideo = computed(() =>
  ['mp4', 'mov', 'avi'].includes(fileName.value?.split('.').pop().toLowerCase())
);

const isAudio = computed(() =>
  ['mp3', 'wav', 'aac'].includes(fileName.value?.split('.').pop().toLowerCase())
);

onMounted(parseUrl);
</script>
